<template>
	<view class="news_deta">
		<uv-navbar placeholder autoBack bgColor="#CA1C1D">
			<template v-slot:left>
				<view class="left_slot">
					<image src="@/static/images/back.png"></image>
				</view>
			</template>
			<template v-slot:center>
				<view class="nav_title">新闻详情</view>
			</template>
		</uv-navbar>
		<view class="header">
			<view class="title">{{data_info.title}}</view>
			<view class="time">浏览{{data_info.see_number}}次</view>
		</view>
		<view class="parse_view">
			<uv-parse :preview-img="false" :content="data_info.content"></uv-parse>
		</view>
	</view>
</template>

<script setup>
	import {
		newsInfo
	} from "@/request/api";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		ref
	} from "vue";

	const data_info = ref({
		title: "",
		see_number: "",
		content: ""
	});
	onLoad(async ({
		id
	}) => {
		let {
			info
		} = await newsInfo({
			id
		});
		data_info.value = info;
		console.log(info)
	});
</script>

<style scoped lang="scss">
	.news_deta {
		min-height: calc(100vh - var(--window-top) - var(--window-bottom));
		background-color: #f5f5f5;

		.left_slot {
			image {
				width: 43rpx;
				height: 36rpx;
			}
		}

		.nav_title {
			color: #F5F5F5;
			font-size: 36rpx;
		}

		.header {
			height: 200rpx;
			padding: 32rpx 0 24rpx 30rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.title {
				color: #333333;
				font-size: 36rpx;
				font-weight: bold;
			}

			.time {
				color: #999999;
				font-size: 22rpx;
			}
		}

		.parse_view {
			margin-top: 10rpx;
			padding: 36rpx 30rpx;
			box-sizing: border-box;
			background: #FFFFFF;
		}
	}
</style>